<template>
	<view>
		<template v-if="list.length>0">
			<!-- 打卡列表 -->
			<template v-if="index==0">
				<block v-for="(item,index) in list" :key="index">
					<m-clock-item :item="item"></m-clock-item>
				</block>
			</template>
			<!-- 审批列表 -->
			<template v-else>
				<block v-for="(item,index) in list" :key="index">
					<m-section-item :item="item"></m-section-item>
				</block>
			</template>
			<uni-load-more :status="loadingType" v-if="list&&list.length >3"></uni-load-more>
		</template>
		<tui-no-data imgUrl="/static/common/empty_icon.png" imgWidth="465" imgHeight="387" v-else>还没有数据哦~
		</tui-no-data>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import mClockItem from "@/components/hq-ui/m-clock-item"
	import mSectionItem from "@/components/hq-ui/m-section-item"
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	export default {
		props: {
			i: Number, // 每个tab页的专属下标
			index: { // 当前tab的下标
				type: [Number, String],
				default () {
					return ""
				}
			}
		},
		components: {
			mClockItem,
			mSectionItem,
			uniLoadMore
		},
		data() {
			return {
				list: [], //列表 
				isInit: false, // 当前tab是否已初始化
				loadingType: 'more',
				pageNo: 1,
				pageNos: 0,
				pageSize: 10 //返回数据的个数
			};
		},
		watch: {
			// 监听下标的变化
			index: {
				handler(val) {
					if (this.i === val && !this.isInit) {
						this.isInit = true; // 标记为true
						if (this.i == 0) { //打卡列表
							this.loadPunchList()
						}
						if (this.i == 1) { //审批列表
							this.loadApprovalList()
						}
					}
				},
				immediate: true
			}
		},
		methods: {
			// 搜索
			searchList(params = {}) {
				if (this.index == 0) { //打卡列表
					this.pageNo = 1;
					this.loadPunchList('refresh', params)
				}
				if (this.index == 1) { //审批列表
					this.loadApprovalList('refresh', params)
				}
			}, 
			// 上拉加载
			onReachBottomList(params = {}) {
				//触底开始下一页
				let that = this; 
				if (that.index==1||that.pageNo >= that.pageNos) {
					return;
				}
				//加载打卡记录
				that.pageNo = that.pageNo + 1;
				that.loadPunchList('reach',params);
			},  
			// 加载列表
			loadPunchList(source, params = {}) {
				let that = this;
				let pageNo = that.pageNo, //把第几次加载次数作为参数
					pageSize = that.pageSize; //返回数据的个数 
				if (source == 'reach' && that.loadingType == 'noMore') {
					//防止重复加载
					return;
				}
				if (that.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				that.loadingType = 'loading';
				that.$api.showLoading();
				let _params = {
					pageNum: pageNo,
					pageSize: pageSize,
					isAsc: 'asc',
					...params
				};
				that.$apis.getClockList(_params).then(result => {
					that.$api.hideLoading();
					let _data = result;
					if (_data.code === 0) {
						//判断是否有数据，有则取数据
						if (that.pageNo <= 1) {
							that.list = _data.rows;
							that.pageNos = parseInt((_data.total + (pageSize - 1)) / pageSize);
						} else {
							that.list = that.list.concat(_data.rows);
						}
						that.pageNo = pageNo;
						if (that.pageNo >= that.pageNos) {
							that.loadingType = 'noMore';
						} else {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							that.loadingType = 'more';
						}
					}
				});
			},
			// 审批列表
			loadApprovalList(source, params) {
				let that = this;
				let _params = {
					...params
				}
				that.$api.showLoading();
				that.$apis.managerApproveList(_params).then(result => {
					that.$api.hideLoading();
					let _data = result;
					if (_data.code === 0) {
						that.isInit = true; // 标记为true  
						that.loadingType = 'noMore';
						if (source == 'refresh') {
							that.list = [];
						}
						//判断是否有数据，有则取数据 
						that.list = _data.rows;
					}
				});
			},
		}
	}
</script>

<style lang="scss">

</style>